{extend name="layout/base" /}
{block name="css"}
<link rel="stylesheet" href="__CDN__/assets/css/list.css">
{/block}
{block name="content"}
<div class="main clearfix">
    <div class="list resultList"></div>
        <script type="text/x-dot-template" id="listT">
            {{ for (var i = 0; i < it.length; i++) { }}
                {{?it[i].flagLetter}}
                    <div class="box"><p id="{{=it[i].flagLetter}}" class="groupTitle">{{=it[i].flagLetter}}</p></div>
                    <div class="clear"></div>
                {{?}}
                <div class="item flex-def flex-cCenter" tapmode>
                    <div class="title">
                        <a href="/index/business/index?brand_id={{=it[i].id}}">
                        <div class="img-box">
                            <img src="{{=it[i].logo}}" />
                        </div>
                        <h3 class="name">{{=it[i].name}}</h3>
                        </a>
                    </div>
                </div>
            {{ }; }}
            <div class="clear"></div>
        </script>
</div>
<div class="slidePage flex-def flex-zTopBottom flex-zCenter flex-cEnd" ontouchend="touchEnd()"  ontouchmove="move()">
    <div class="wrap"></div>
</div>
<div class="letter"></div>
{/block}
{block name="script"}
<script type="text/javascript" src="__CDN__/assets/js/doT.min.js"></script>
<script type="text/javascript">
    
    // 数据源
    var data = {$brand};
    // 判断是否是字母
    function f_check_uppercase(obj) {
       if (/[A-Z]/.test(obj))    {
          return true;
       }
       return false;
    }
    // 数据排序
    function sortData(data) {
        var letterArr = [];
        for (var i = 0; i < data.length; i++) {
            for (var j = 0; j < data.length; j++) {
                if (data[i].flag < data[j].flag) {
                    var temp = data[i];
                    data[i] = data[j];
                    data[j] = temp;
                }
            }
         }
         if (f_check_uppercase(data[0].flag)) {
            letterArr.push(data[0].flag)
         } else {
            letterArr.push('#')
         }
        for (var i = 0; i < data.length; i++) {
            if(f_check_uppercase(data[0].flag)) {
                data[0].flagLetter = data[0].flag
            } else {
                data[0].flagLetter = '#'
            }
            if (i>0) {
                if (data[i].flag !== data[i-1].flag) {
                    if (f_check_uppercase(data[i].flag)) {
                        data[i].flagLetter = data[i].flag;
                        letterArr.push(data[i].flag)
                    } else {
                        data[i].flagLetter = '#';
                        letterArr.push('#')
                    }
                }
            }
         }
         // 侧边栏
         var str = '' ;
         for (var i = 0; i < letterArr.length; i++) {
            str += '<a ontouchstart="anchorJump(this)"  >'+ letterArr[i] +'</a>'
         }
         $('.slidePage div').html(str)
         $('.resultList').html(doT.template($('#listT').text())(data))
    }
    // 跳转锚点
    function anchorJump(n) {
        var text = $(n).text();
        if (text.length < 2) {
            $('.letter').text(text)
            $('.letter').css({'opacity':' 1'})
            location.hash = '#' + text;
        }
        document.location.replace(getFilterUrl(text));
    }

    function getFilterUrl(hash) {
        return document.location.protocol + '//' + document.location.host + document.location.pathname + document.location.search + '#' + hash;
    }
    // 滑动结束
    function touchEnd() {
        var opcityNum = 1;
        setInterval(function () {
            opcityNum -= 0.1;
            if (opcityNum > 0) {
                $('.letter').css({'opacity': opcityNum})
            } else {
                clearInterval();
            }
        },50)
    }
    // 手指滑动
    function move() {
       //  获取开始点击的位置
       //  每滑动一个a标签的高度切换一个锚点
        event.preventDefault();
        anchorJump(document.elementFromPoint(event.changedTouches[0].clientX,event.changedTouches[0].clientY))
    }
    sortData(data);

    var isPageHide = false;
    window.addEventListener('pageshow', function () {
        if (isPageHide) {
            window.location.reload();
        }
    });
    window.addEventListener('pagehide', function () {
        isPageHide = true;
    });
</script>
{/block}
